<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>Canvas 测试页面</title>
  <style>
    body {
      margin: 0;
      padding: 20px;
      background: #f0f0f0;
      font-family: Arial, sans-serif;
    }
    .m-canvas {
      border: 1px solid #ccc;
      background: white;
    }
    #result {
      margin-top: 10px;
      color: #333;
      word-break: break-all;
    }
  </style>
</head>
<body>

<h2>Canvas 测试（ID: ho2l8q3h9k）</h2>

<canvas id="ho2l8q3h9k" width="1328" height="37" class="m-canvas"></canvas>

<button onclick="getCanvasData()">点击获取 Base64 数据</button>
<div id="result"></div>

<script>
  // 获取 canvas 并绘制内容
  const canvas = document.getElementById('ho2l8q3h9k');
  const ctx = canvas.getContext('2d');

  // 设置背景色
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制文字
  ctx.font = 'bold 24px Arial';
  ctx.fillStyle = '#ff5722';
  ctx.fillText('这是一个 Canvas 测试图像', 10, 28);

  // 可选：绘制小图标或线条
  ctx.strokeStyle = '#4caf50';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(10, 35);
  ctx.lineTo(200, 35);
  ctx.stroke();

  // 提供给外部调用的函数（如 CEF 或易语言注入 JS 调用）
  window.getCanvasBase64 = function() {
    return canvas.toDataURL('image/png');
  };

  // 页面内测试按钮用
  function getCanvasData() {
    const dataURL = canvas.toDataURL('image/png');
    document.getElementById('result').innerText = dataURL;
    console.log('Canvas Base64:', dataURL);
  }
</script>

</body>
</html>